<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:substituteby="navtempStore::docHead(#{storecenter.name},'首页')">
</head>
<body>
<style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
</style>
<nav th:replace="navtempStore::nav(#{storecenter.name})"></nav>
<div class="container">
    <div class="row" style="margin-top: 5em;">
        <div class="col-sm-12 col-md-12">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">添加私教约课：</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="input-group" style="margin-bottom: .5em;">
                <span class="input-group-addon">&nbsp;会员手机号码&nbsp;</span>
                <input name="description" class="form-control" placeholder="会员手机号码"
                       aria-describedby="basic-username" type="text"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading"><h4>会员资料</h4></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4"><span>姓名:胤禛</span></div>
                        <div class="col-md-4"><span>性别:男</span></div>
                        <div class="col-md-4"><span>手机号码:1381000000</span></div>
                    </div>
                </div>
                <!-- Table -->
                <table class="table">
                    <thead>
                    <th>会员卡类型</th>
                    <th>剩余次数</th>
                    <th>余额</th>
                    <th>有效期</th>
                    <th>状态</th>
                    <th>适用消费课程</th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>年卡</td>
                        <td>-</td>
                        <td>-</td>
                        <td>2018-12-31</td>
                        <td><span class="label label-success">有效</span></td>
                        <td>高温/常温瑜伽</td>
                    </tr>
                    <tr>
                        <td>100次卡</td>
                        <td>99</td>
                        <td>-</td>
                        <td><span class="label label-danger">2016-12-31</span></td>
                        <td><span class="label label-danger">无效</span></td>
                        <td>高温/常温瑜伽</td>
                    </tr>
                    <tr>
                        <td>10000元储值卡</td>
                        <td>-</td>
                        <td><span class="label label-warning">100.00</span></td>
                        <td><span class="label label-warning">2018-12-31</span></td>
                        <td><span class="label label-success">有效</span></td>
                        <td>高温/常温瑜伽</td>
                    </tr>
                    <tr>
                        <td>100次私教卡</td>
                        <td><span class="label label-warning">45</span></td>
                        <td>-</td>
                        <td>2018-12-31</td>
                        <td><span class="label label-success">有效</span></td>
                        <td><span class="label label-danger">私教课</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div><br/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab1" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        预约时间
                    </a>
                </li>
            </ul>
            <div id="myTabContent1" class="tab-content">
                <div class="tab-pane fade in active" id="home1">
                    <div class="table-responsive" style="margin-bottom: .5em;">
                        <br/>
                        <div class="col-md-3">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;预约时间&nbsp;</span>
                                <input name="description" class="form-control" placeholder="预约时间"
                                       aria-describedby="basic-username" type="text"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><br/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab2" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        选择教练
                    </a>
                </li>
            </ul>
            <div id="myTabContent2" class="tab-content">
                <div class="tab-pane fade in active" id="home12">
                    <div class="table-responsive" style="margin-bottom: .5em;">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td></td>
                                <td>教练姓名</td>
                                <td>简介</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            </thead>
                            <tbody id="myAddTable1">
                            <tr >
                                <td><input type="radio"/></td>
                                <td>李四</td>
                                <td>教练还可以</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr >
                                <td><input type="radio"/></td>
                                <td>张三</td>
                                <td>张三教练还可以</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr >
                                <td><input type="radio"/></td>
                                <td>王五</td>
                                <td>王五教练还可以</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><br/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab3" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        可选教室
                    </a>
                </li>
            </ul>
            <div id="myTabContent3" class="tab-content">
                <div class="tab-pane fade in active" id="home3">
                    <br/>
                    <div class="input-group input-inline">
                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-success">教室一</button>&nbsp;&nbsp;
                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-info">教室二</button>&nbsp;&nbsp;
                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-success">教室三</button>&nbsp;&nbsp;
                    </div>
                </div>
            </div>
        </div>
    </div><br/>
    <div class="row">
        <div class="col-md-1 col-md-offset-5">
            <input type="button" value="预约" class="btn btn-primary btn-block" style="margin: 0 auto; display: block;"
                   onclick="window.location.href='/demo/store/appointment'"/>
        </div>
        &nbsp;
        <div class="col-md-1">
            <input type="button" value="取消" class="btn btn-danger btn-block" style="margin: 0 auto; display: block;"
                   onclick="window.location.href='/demo/store/appointment'"/>
        </div>
        <br/>
    </div>
</div>
</body>
</html>
